<template>
<!-- part-two 进度条 -->
<div class="progress-bar">
      <div class="forget-item">
        <div class="progress-bar-one">
          <div class="line-num arrs">1</div>
          <div class="line-item-right arrs-line"></div>
        </div>
        <div class="line-item-title">提交订单</div>
        <div class="line-item-title-one">2023-06-18 23:54:04</div>
      </div>
      <div class="forget-item">
        <div class="progress-bar-one">
          <div class="line-item-left"></div>
          <div class="line-num arrs">2</div>
          <div class="line-item-right arrs-line"></div>
          <div class="line-item-title">付款成功</div>
          <div class="line-item-title-one">2023-06-18 23:54:04</div>
        </div>
      </div>
      <div class="forget-item">
        <div class="progress-bar-one">
          <div class="line-item-left"></div>
          <div class="line-num">3</div>
          <div class="line-item-right"></div>
          <div class="line-item-title">商品发货</div>
          <div class="line-item-title-one">2023-06-18 23:54:04</div>
        </div>
      </div>
      <div class="forget-item">
        <div class="progress-bar-one">
          <div class="line-item-left"></div>
          <div class="line-num">4</div>
          <div class="line-item-right"></div>
          <div class="line-item-title">确认收货</div>
          <div class="line-item-title-one">2023-06-18 23:54:04</div>
        </div>
      </div>
      <div class="forget-item">
        <div class="progress-bar-one">
          <div class="line-item-left"></div>
          <div class="line-num">5</div>
          <div class="line-item-title">订单完成</div>
          <div class="line-item-title-one">2023-06-18 23:54:04</div>
        </div>
      </div>
    </div>
</template>
<style lang="less" scoped>
      .progress-bar {
          width: 100%;
          display: flex;
          justify-content: center;
          height: 142px;
        }
        .progress-bar-one {
          width: 192px;
          height: 48px;
          position: relative;
        }
        .line-num {
          width: 48px;
          height: 48px;
          border: 2px solid #e4e4e4;
          border-radius: 50%;
          line-height: 44px;
          font-size: 28px;
          color: #ccc;
          margin: 0 auto;
          position: relative;
          z-index: 1;
          background-color: #fff;
          text-align: center;
        }
        .forget-item {
          text-align: center;
        }
        .line-item-right {
          height: 2px;
          background-color: #e4e4e4;
          width: 50%;
          position: absolute;
          top: 23px;
          left: 50%;
        }
        .line-item-left {
          height: 2px;
          background-color: #e4e4e4;
          width: 50%;
          position: absolute;
          top: 23px;
          right: 50%;
        }
        .line-item-title {
          margin-top: 8px;
          color: #27BA9B;
          font-size: 14px;
        }
        .line-item-title-one {
          color: #999;
          margin-top: 8px;
          font-size: 12px;
        }
         // 进度绿色
         .arrs {
            background-color: #27BA9B;
            color: #fff;
            border: 2px solid #27BA9B;

        }
        .arrs-line {
            background-color: #27BA9B;
        }
</style> 
<script setup lang="ts">

</script>